<template>
	<view class="outBox" @click.stop="hideInfoBox">
		<u-navbar leftText="发起提现" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '发起提现' }}</text>
			</view>
		</u-navbar>
    <VideoBox>
      <template #content>
		    <view class="content" >
			<view class="box" :style="{
				backgroundImage:`url(${getImgUrl('/mine/bg1.png')})`,
				backgroundSize:'100% 100%'
			}">
				<view class="tit" @click.stop="handleInfo1">
					<text>可提现余额</text>
					<view class="showInfoBox" :style="{
          backgroundSize:'100% 100%',
		  display: showInfoBox1 ? 'block' : 'none'
				}">
						<view class="tit2">
							<text>提现说明：</text>
						</view>
						<view class="text" style="margin-bottom: 32rpx">
							<text style="padding-right: 10rpx;">*</text>
							<text>每月</text>
							<text style="color:#0FC6C2">1号-3号</text>
							<text>，进行上月业绩结算，</text>
							<text style="color:#0FC6C2">4号
							</text>
							<text>可以发起提现，通过审核后，</text>
							<text style="color:#0FC6C2">5-7</text>
							<text>个工作日到账</text>
						</view>
					</view>
					<image style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
				</view>
				<view class="value">
					<text>¥{{ minePrice }}</text>
				</view>
				<view class="inputBox">
					<!-- <input class="uni-input" type="digit" @input="input" placeholder="请输入提现金额" color="#fff"/> -->
					<u-input placeholder="请输入提现金额" :customStyle="{
						height:'100%'
					}" border="surround" color="#fff" v-model="value" type="number"></u-input>
				</view>
				<view class="btns">
					<view class="btnOut">
						<view class="btn" @click="handleSubmit">
							<text>提交</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btns" v-if="!isBindCard">
				<view class="btnOut btnOut3" @click="handleShowBind">
					<view class="btn btn3">
						<text class="myText">添加银行卡</text>
					</view>
				</view>
			</view>

			<view class="cardBox" v-if="isBindCard">
				<view class="title">我的银行卡</view>
				<view class="tip">储蓄卡</view>
				<view class="cardNumber">
					<view class="item" v-for="item in 3">
						<view class="circle" v-for="item in 4"></view>
					</view>
					<view class="item">
						<text>{{ bankCardLast4 }}</text>
					</view>
				</view>
			</view>
			<view class="btnJs" v-if="isBindCard" @click="handleUnBanding">
				<text>解绑银行卡</text>
				<image :src="getImgUrl(`reservation/img3.png`)" mode="widthFix" class="iconImg"></image>
			</view>
		</view>
      </template>
    </VideoBox>
		<diaBox ref="diaBoxRef1" title="添加银行卡" @comfireFunc="handleBindCard" :show-btns="true">
			<template slot="dia-cont">
				<view class="phoneBox">
					<view class="tip">不要提供任何形式的个人信息（如：验证码、身份证、手机号等）谨防诈骗！</view>
					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入真实姓名" border="surround" v-model="cardInfo.realName"
								color="#fff"></u--input>
						</view>
					</view>
					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入银行卡号" color="#fff" border="surround" v-model="cardInfo.bankNumber"
								@blur="blurBankNum"></u--input>
						</view>
					</view>

					<view class="inputBox">
						<view class="input">
							<u--input placeholder="请输入开户行" color="#fff" border="surround"
								v-model="cardInfo.openingBank"></u--input>
						</view>
					</view>

					<view class="inputBox">
						<view class="input">
							<u--input placeholder="银行名称" color="#fff" border="surround"
								v-model="cardInfo.bankName"></u--input>
						</view>
					</view>
				</view>
			</template>
		</diaBox>
		<diaBox ref="diaBoxRef2" title="解绑银行卡" content="是否确认解绑？ " :show-btns="true" @comfireFunc="unBindFunc" />
	</view>
</template>

<script>
	import {
		debounce,
		getWXStatusHeight,
		getImgUrl
	} from '@/utils/index.js'

	import * as bankJson from "@/utils/bankJson.json"

	import infoBg from "@/static/order/bg1.png";

	import {
		bindBankCardApi,
		findMyPayAccountApi,
		initiateSalePayAccountApprovalApi,
		unbindBankCard,
		getCardOpenName
	} from "@/api/api";
	import diaBox from "@/components/diaBox/index.vue";
  import VideoBox from "@/components/VideoBox/index.vue";


	export default {
		components: {
      VideoBox,
			diaBox
		},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				videoUrl: this.$videoUrl,
				baseImgUrl2: this.$baseImgUrl2,
				infoBg: infoBg,
				value: '',
				minePrice: 0,
				isBindCard: false,
				bankCardLast4: false,
				cardInfo: {
					realName: '',
					bankNumber: '',
					openingBank: '',
					bankName: '',
				},
				showInfoBox1: false,
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.findMyPayAccount()
		},
		methods: {
			getImgUrl,
			async blurBankNum() {
				if (this.cardInfo.bankNumber) {
					const res = await getCardOpenName(this.cardInfo.bankNumber)
					// 再从json里面去取出中文
					const bankName = bankJson[res.bank]
					if (bankName) {
						this.cardInfo.bankName = bankName
					}
				}
			},
			hideInfoBox() {
				this.showInfoBox1 = false
			},
			handleInfo1() {
				this.showInfoBox1 = true
			},
			handleShowBind() {
				this.$refs.diaBoxRef1.show = true
			},
			// 绑定银行卡
			async handleBindCard() {
				if (this.cardInfo.realName == '') {
					return uni.$u.toast('请输入真实姓名')
				} else if (this.cardInfo.bankNumber == '') {
					return uni.$u.toast('请输入银行卡号')
				} else if (this.cardInfo.openingBank == '') {
					return uni.$u.toast('请输入开户行')
				} else {
					const res = await bindBankCardApi(this.cardInfo)
					if (res.code == 200) {
						uni.$u.toast('绑定成功')
						await this.findMyPayAccount()
						this.$refs.diaBoxRef1.close()
					}
				}
			},
			// 解绑银行卡
			async unBindFunc() {
				const res = await unbindBankCard()
				if (res.code == 200) {
					uni.$u.toast('解绑成功')
					await this.findMyPayAccount()
					this.$refs.diaBoxRef2.close()
				}
			},
			// 取消绑定
			handleUnBanding() {
				this.$refs.diaBoxRef2.show = true
			},
			changeInput(e) {
				this.$nextTick(() => {
					this.value = e.replace(/[^\d]/g, '')
				})
			},
			handleSubmit() {
				if (this.value > this.minePrice) {
					return uni.$u.toast('提现金额不能大于可提现金额')
				}
				// 判断是否添加银行卡
				if (!this.isBindCard) {
					return uni.$u.toast('请先添加银行卡')
				}
				// 校验金额是否正常
				var num = parseFloat(this.value);
				if (isNaN(num)) {
					uni.$u.toast('提现金额异常')
					return
				}
				if(num <= 0){
					uni.$u.toast('提现金额需大于0')
					return
				}
				// 防抖执行
				debounce(this.initiateSalePayAccountApproval, 500)()
			},
			async initiateSalePayAccountApproval() {
				const res = await initiateSalePayAccountApprovalApi(this.value)
				if (res.code == 200) {
					uni.$u.toast('提交成功')
					this.value = ''
					await this.findMyPayAccount()
				}
			},
			// 查询余额
			async findMyPayAccount() {
				const res = await findMyPayAccountApi()
				this.minePrice = res.data.balanceSalaryPrice
				console.log(this.minePrice, "this.minePrice");
				this.isBindCard = res.data.isBindBankCard
				this.bankCardLast4 = res.data?.bankCardLast4
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showInfoBox {
		position: absolute;
		width: 546rpx;
		box-sizing: border-box;
		padding: 68rpx 50rpx 45rpx;
		z-index: 8;
		top: 100%;
		transform: tran slateY(20rpx);
		left: 15rpx;
		border-radius: 30rpx;
		background: #32333a;

		.tit2 {
			margin: 0 0 30rpx !important;
			font-size: 28rpx;
			color: #0FC6C2;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: justify;
			font-style: normal;
			margin-bottom: 20rpx;

			text {
				margin-right: 0 !important;
			}
		}

	}

	.phoneBox {

		margin-top: 50rpx;

		.tip {
			font-size: 22rpx;
			margin-bottom: 20rpx;
			color: #86909C;

		}

		.inputBox {
			display: flex;
			align-items: center;
			border: 2rpx solid #343539;
			background: rgba(15, 15, 15, 0.41);
			border-radius: 40rpx;
			margin-bottom: 20rpx;
			height: 112rpx;
			padding: 0 32rpx;

			.btn {
				font-weight: 400;
				font-size: 32rpx;
				color: #0FC6C2;
				line-height: 32rpx;
				text-align: right;
				font-style: normal;
			}

			.input {
				flex: 1;
				color: #fff;
			}
		}
	}

	.cardBox {
		width: 682rpx;
		height: 260rpx;
		border-radius: 60rpx;
		background-color: rgba(175, 74, 57, 0.66);
		backdrop-filter: blur(7px);
		padding-top: 42rpx;
		padding-left: 42rpx;
		box-sizing: border-box;

		.title {
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			margin-bottom: 20rpx;
		}

		.tip {
			font-weight: 500;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.58);
			line-height: 28rpx;
		}

		.cardNumber {
			display: flex;
			font-weight: 500;
			font-size: 36rpx;
			color: rgba(255, 255, 255, 0.58);
			line-height: 36rpx;
			margin-top: 30px;

			.item {
				margin-right: 20px;
				display: flex;
				align-items: center;

				.circle {
					margin-right: 5px;
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.53);
				}
			}
		}
	}

	.btnJs {

		position: relative;

		text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
		}

		image {
			width: 100%;
		}
	}

	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.btns {
		margin-top: 32rpx;

		.btnOut {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
		}


		.btn {
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			border-radius: 64rpx;
			background: #0FC6C2;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;

			text {
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.btnOut3 {
			border-radius: 64rpx;
			width: 536rpx;
			margin: 0 auto;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(71, 136, 247, 0.25);
		}

		.btn3 {
			background: #4788f7;
			width: 536rpx;
		}
	}

	.box {
		width: 688rpx;
		height: 590rpx;
		background-size: 100% 100%;
		padding: 80rpx 76rpx;
		box-sizing: border-box;
		margin-top: 60rpx;

		.tit {
			font-weight: 500;
			font-size: 28rpx;
			color: #86909C;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
			margin-bottom: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				margin-right: 10rpx;
			}
		}

		.value {
			font-weight: normal;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			margin-bottom: 62rpx;
			text-align: center;

			text {
				font-size: 55rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.inputBox {
			width: 540rpx;
			height: 116rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			line-height: 116rpx;
			border-radius: 60rpx;
			background: rgba(0, 0, 0, .52);

			input {
				line-height: 116rpx !important;
			}

			::v-deep .u-input {
				line-height: 116rpx;
			}

			.input {
				flex: 1;
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.content {
		position: relative;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}
</style>
